<template>
 <div>
    <div class="f ac pb10">
      <div class="nowrap mr5 b">类型：</div>
      <div class="g1aada7 rds2 pl5 pr5 pt2 pb2" style="border:1px solid #1aada7;">栅格</div>
    </div>
    <div v-for="(curItem, index) in item.children" :key="curItem.id" class="pt10 pb10">
      <div class="nowrap mr5 b">栅格{{index + 1}}宽度占比</div>
      <div class="f ac">
        <div :class="['f1 rel']">
          <InputNumber :max="100" :min="1" :value="Number(curItem.span)" @input="e=>changeCurVal(e, curItem)" v-float style="width:calc(100% - 40px)">
          </InputNumber>
          <!-- <input
            :value="curItem.span"
            class="fs14 f ac rds4 rel hoverBorder pl5 db bdAndNone w100 ivu-input"
            :style="{color: '#515a6e',height:'32px'}"
            placeholder="请输入"
            @input="e=>changeCurVal(e, curItem)"
            v-float
            v-decimalLimit="2"
            v-min="0"
            v-max="100"
          /> -->
          <div class="abs r0 t0 b0 f ac xc g3" style="width:40px;background:#F6F6F6;border: 1px solid #B8BBC0;border-radius: 0 5px 5px 0;">%</div>
        </div>
        <svg v-if="item.children.length > 1" @click="delCurSpan(curItem)" t="1683362176739" class="ml5 poi" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3695" width="28" height="28"><path d="M780 480H244c-17.67 0-32 14.33-32 32s14.33 32 32 32h536c17.67 0 32-14.33 32-32s-14.33-32-32-32z" p-id="3696" fill="#d10000"></path><path d="M512 130c51.6 0 101.62 10.09 148.67 29.99 45.48 19.24 86.34 46.79 121.44 81.89s62.66 75.96 81.89 121.44c19.91 47.06 30 97.08 30 148.68s-10.09 101.62-29.99 148.67c-19.24 45.48-46.79 86.34-81.89 121.44S706.16 844.77 660.68 864c-47.06 19.91-97.08 30-148.68 30s-101.62-10.09-148.67-29.99c-45.48-19.24-86.34-46.79-121.44-81.89S179.23 706.16 160 660.68c-19.91-47.06-30-97.08-30-148.68s10.09-101.62 29.99-148.67c19.24-45.48 46.79-86.34 81.89-121.44s75.96-62.66 121.44-81.89c47.06-19.91 97.08-30 148.68-30m0-64C265.68 66 66 265.68 66 512s199.68 446 446 446 446-199.68 446-446S758.32 66 512 66z" p-id="3697" fill="#d10000"></path></svg>
        <svg @click="addCurSpan" t="1683362097785" :class="['ml5 poi', index == item.children.length - 1 ? '' : 'op0 zx-1']" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2502" width="26" height="26"> <path d="M852.812 166.713c-92.715-89.28-212.9-140.789-339.954-140.789s-250.672 51.509-339.953 140.79c-188.863 188.862-188.863 491.043 0 679.906 89.28 89.28 212.9 140.789 339.953 140.789S763.531 935.9 852.812 846.62c188.863-188.863 188.863-491.044 0-679.907m-48.074 631.833c-78.98 78.979-181.996 120.185-291.88 120.185s-212.9-41.206-291.879-120.185c-161.392-161.392-161.392-422.367 0-583.759 78.98-78.979 181.996-120.185 291.88-120.185s212.9 41.206 291.879 120.185c161.392 161.392 161.392 422.367 0 583.759" fill="#1AADA7" p-id="2503"></path><path d="M547.197 472.328V297.2c0-20.603-13.735-34.338-34.339-34.338S478.52 276.597 478.52 297.2v175.128H303.392c-20.603 0-34.339 13.735-34.339 34.339 0 10.301 3.434 17.169 10.302 24.037s13.736 10.301 24.037 10.301H478.52v175.128c0 10.302 3.434 17.17 10.301 24.037 6.868 6.868 13.736 10.302 24.037 10.302 20.604 0 34.34-13.736 34.34-34.34V541.006h175.127c20.603 0 34.338-13.735 34.338-34.338s-13.735-34.34-34.338-34.34H547.197z" fill="#1AADA7" p-id="2504"></path></svg>
      </div>
    </div>
    <!-- <div class=" pt10 pb10">
      <div class="nowrap mr5 b">字段标识1：</div>
      <Input :value="item.key1" @on-change="e=>changeField(e, 'key1')" disabled />
    </div>
    <div class=" pt10 pb10">
      <div class="nowrap mr5 b">字段标识2：</div>
      <Input :value="item.key2" @on-change="e=>changeField(e, 'key2')" disabled />
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">标签宽度：</div>
      <Input :value="item.labelWidth" @on-change="e=>changeField(e, 'labelWidth')" v-int v-min="0" v-max="10000" />
    </div> -->
    <!-- <div class="pt10 pb10">
      <div class="nowrap mr5 b">占位内容：</div>
      <Input :value="item.placeholder" @on-change="e=>changeField(e, 'placeholder1')" />
    </div> -->
    <!-- <div class="pt10 pb10">
      <div class="nowrap mr5 b">最大可输入长度：</div>
      <Input :value="item.maxlength" @on-change="e=>changeField(Number(e.target.value), 'maxlength')" v-int v-min="0" v-max="99999" />
    </div> -->
    <!-- <div class="pt10 pb10">
      <div class="nowrap mr5 b">单位：</div>
      <Input :value="item.unit" @on-change="e=>changeField(e, 'unit')" />
    </div> -->
    <!-- <div class="pt10 pb10">
      <div class="nowrap mr5 b">操作属性：</div>
      <div class="f rw">
        <div @click="checkOperate(optItem)" v-for="optItem in operateList" :key="optItem.id" class="f ac mr30  poi">
          <div class="rds2 rel trans3 f ac xc mr5" :style="{width:'16px',height:'16px',background: optItem.isChecked ? '#1aada7' : '#fff', border: optItem.isChecked ? 'none' : '1px solid #dcdee2'}">
            <div v-show="optItem.isChecked" style="width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translate(0, -1px) rotate(-45deg);"></div>
          </div>
          {{optItem.name}}
        </div>
      </div>
    </div>
    <div class="pt10 pb10">
      <div class="nowrap mr5 b">校验：</div>
      <div class="">
        <div v-for="optItem in checkList" :key="optItem.id" >
          <div @click="selectCheck(optItem)" class="f ac poi">
            <div class="rds2 rel trans3 f ac xc mr5" :style="{width:'16px',height:'16px',background: optItem.isChecked ? '#1aada7' : '#fff', border: optItem.isChecked ? 'none' : '1px solid #dcdee2'}">
              <div v-show="optItem.isChecked" style="width:10px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translate(0, -1px) rotate(-45deg);"></div>
            </div>
            {{optItem.name}}
          </div>
          <div v-if="optItem.id == 2 && optItem.isChecked" class="mb5">
            <Input :value="item.regExp" @on-change="e=>changeField(e, 'regExp')" />
          </div>
          <div v-if="optItem.id == 3 && optItem.isChecked" class="mb5">
            <Input :value="item.validator" @on-change="e=>changeField(e, 'validator')" />
          </div>
        </div>
      </div>
    </div> -->
    <!-- <div class="pt10 pb10">
      <div class="nowrap mr5 b">事件动作</div>
      <div class="">
        <div>onChange事件</div>
        <Input type="textarea" :autosize="{ minRows: 4 }" class="" :value="item.onChange" @on-change="e=>changeField(e, 'onChange')" />
      </div>
      <div class="">
        <div>onFocus事件</div>
        <Input type="textarea" :autosize="{ minRows: 4 }" class="" :value="item.onFocus" @on-change="e=>changeField(e, 'onFocus')" />
      </div>
      <div class="">
        <div>onBlur事件</div>
        <Input type="textarea" :autosize="{ minRows: 4 }" class="" :value="item.onBlur" @on-change="e=>changeField(e, 'onBlur')" />
      </div>
    </div> -->
  </div>
</template>
<script src='./index.js'></script>
<style src='./index.css' scoped></style>